<template>
  <div class="app-page">
    <!-- 头 -->
    <div class="app-header">
      <div class="app-title">
        <i :class="$route.meta.icon"></i> {{ $route.meta.title }}
      </div>
    </div>
    <div class="app-page-padding">
      <h3 class="app-page-h3-title">
        rs-title01标题01
      </h3>
      <div class="app-section">
        <RsTitle01></RsTitle01>
      </div>
      <h3 class="app-page-h3-title">
        rs-title02标题02
      </h3>
      <div class="app-section">
        <RsTitle02>标题</RsTitle02>
      </div>
    </div>
  </div>
</template>
<script>
import RsTitle01 from './children/rs-title01'
import RsTitle02 from './children/rs-title02'
export default {
  name: 'Name',
  components: {
    RsTitle01,
    RsTitle02
  },
  data () {
    return {
      code: `
      `,
      cmOptions: {
        // codemirror options
        tabSize: 4,
        mode: 'sass',
        theme: 'darcula',
        lineNumbers: true,
        line: true
        // more codemirror options, 更多 codemirror 的高级配置...
      }
    }
  },
  watch: {
    a (o, n) {
      console.log(o, n)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
body{
  display: flex;
  align-items: center;
}
</style>
